<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>分类</title>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
    <style>
        html,
        body {
            background-color: #fff;
            height: 100%;
            position: absolute;
        }

        .wrap {
          height: 100%;
            /*display: -webkit-box;
            display: -webkit-flex;
            display: flex;*/
            position: relative;
        }

        .wrap_l {
            width:20%;
            height: 100%;
            float: left;
            position: absolute;
            top: 0;
            left: 0;
        }

        .datalist {
            /*flex: 1;*/
            width: 80%;
            float: left;
            margin-left: 20%;
            height: 100%;
            min-width: 0;
            padding: 0 15px;
            box-sizing: border-box;
            overflow: scroll;
        }

        .title {
            width: 100%;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .datalist ul {
            width: 100%;
            overflow: hidden;
        }

        .datalist ul li {
            width: 32%;
            float: left;
            margin-left: 2%;
            margin-top: 10px;
            overflow: hidden;
        }

        .datalist ul li:nth-child(3n+1) {
            margin-left: 0;
        }

        .datalist ul li div.picture {
            width: 48px;
            height: 48px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .datalist ul li div.picture img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .datalist ul li div.name {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-top: 10px;
            text-align: center;
        }

        .swiper-slide {
            width: auto!important;
            position: relative;
        }

        .swiper-slide>span {
            display: block;
            color: #fff;
        }

        .swiper-slide span:first-child {
            font-family: "微软雅黑";
            color: #333333;
            font-size: 15px;
            text-align: center;
            padding:5px 0;
        }

        .swiper-slide span.line {
            width: 2px;
            height: 100%;
            background-color: #FF3537;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 2px;
        }

        .swiper-slide span.text {
            color: #FF3537!important;
            background-color: #fff;
        }

        .topmenu {
            background: #E6E8ED;
            font-family: "微软雅黑";
            /*position: fixed;*/
        }
        /*[v-cloak] {
            display: none!important;
        }*/
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <div class="wrap_l">
                <div class="topmenu">
                    <div class="swiper-container swiper2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for='(item,index) in good_name_list' tapmode @click="change(index,item.cid)">
                                <span :class="{'text':isActive==index}">{{item.main_name}}</span>
                                <span :class="{'line':isActive==index}"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="datalist" v-for='itm in dataList.data'>
                <div class="title">{{itm.next_name}}</div>
                <ul>
                    <li v-for='oli in itm.info' @click='openSearchPage(oli.son_name)'>
                        <div class="picture"><img :src="oli.imgurl" alt=""></div>
                        <div class="name">{{oli.son_name}}</div>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script src="../../script/swiper.js"></script>
<script type="text/javascript">
    apiready = function() {
        // alert(api.pageParam.cid)
        // alert(api.pageParam.name)
        vm.getSuperCategory();
    }
    var vm = new Vue({
        el: '#app',
        data: {
            good_name_list: [],
            dataList: [],
            isActive: 0,
        },
        methods: {
            /**
             *
             * 获取超级分类列表
             * @return {[type]} [description]
             */
            getSuperCategory: function() {
                api.ajax({
                    url: cl.apiServer + 'category/getSuperClassify',
                    method: 'post',
                    headers: {
                        token:cl.userToken
                    }
                }, function(ret, err) {
                    if (ret) {
                        if (ret.code == 0) {
                            // alert(JSON.stringify(ret))
                            vm.good_name_list = ret.data;
                            setTimeout(function() {
                                var swiper = new Swiper('.swiper2', {
                                    spaceBetween:15,
                                    slidesPerView:'auto',
                                    direction: 'vertical',
                                    freeMode: true
                                }, 10);
                            });
                        }
                    }
                })
            },
            change: function(index, cid) {
                vm.isActive = index;
                vm.getSuperCategoryList(cid)
            },
            getSuperCategoryList: function(cid) {
                api.ajax({
                    url: cl.apiServer + 'category/getSuperClassify',
                    method: 'post',
                    headers: {
                        token:cl.userToken
                    }
                }, function(ret, err) {
                    if (ret) {
                        if (ret.code == 0) {
                            console.log(JSON.stringify(ret))
                            for (var i = 0; i < ret.data.length; i++) {
                                if (ret.data[i].cid == cid) {
                                    vm.dataList = ret.data[i];
                                }
                            };
                        }
                    }
                })
            },
            openSearchPage: function(name) {
                cl.openWin({
                    name: 'search',
                    pageParam: {
                        keyWord: name
                    }
                });
            }
        }
    })
</script>

</html>
